﻿@using MPic.Business.Entity
@{
    ViewBag.Title = "设置";
    Layout = "~/Views/Shared/_Layout.cshtml";
    var defaultUploadType = (int)ViewBag.DefaultUploadType;
    var qiNiu = (QiNiuEntity)ViewBag.QiNiu;
    var oss = (AliYunOSSEntity)ViewBag.AliYunOss;
}
<el-col :span="8" :offset="8" style="margin-top:35px;">
    <el-tabs type="border-card" v-model="activeName">
        <el-tab-pane label="七牛云" name="1">
            <el-form ref="form" :model="qiniu" label-width="80px">
                <el-form-item label="空间名称">
                    <el-input placeholder="请输入空间名称" v-model="qiniu.bucket" minlength='4' maxlength='64'>
                        <template slot="append">
                            <el-popover placement="top-start"
                                        title="设置空间名称"
                                        width="600"
                                        trigger="hover">
                                <div>
                                    <img style="width:100%" src="~/Content/images/help/help2.jpg" />
                                </div>
                                <i slot="reference" class="el-icon-question"></i>
                            </el-popover>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item label="AccessKey">
                    <el-input placeholder="请输入AccessKey" v-model="qiniu.accessKey">
                        <template slot="append">
                            <el-popover placement="top-start"
                                        title="个人中心->密钥管理"
                                        width="600"
                                        trigger="hover">
                                <div>
                                    <img style="width:100%" src="~/Content/images/help/help3.jpg" />
                                </div>
                                <i slot="reference" class="el-icon-question"></i>
                            </el-popover>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item label="SecretKey">
                    <el-input placeholder="请输入SecretKey" v-model="qiniu.secretKey">
                        <template slot="append">
                            <el-popover placement="top-start"
                                        title="个人中心->密钥管理"
                                        width="600"
                                        trigger="hover">
                                <div>
                                    <img style="width:100%" src="~/Content/images/help/help4.jpg" />
                                </div>
                                <i slot="reference" class="el-icon-question"></i>
                            </el-popover>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item label="空间域名">
                    <el-input placeholder="请输入空间域名,如：http://ojalbwkyk.bkt.clouddn.com" v-model="qiniu.domain" maxlength='100'>
                        <template slot="append">
                            <el-popover placement="top-start"
                                        title="设置空间域名"
                                        width="600"
                                        trigger="hover">
                                <div>
                                    <img style="width:100%" src="~/Content/images/help/help1.jpg" />
                                </div>
                                <i slot="reference" class="el-icon-question"></i>
                            </el-popover>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item label="" style="text-align:left;">
                    设置为自己的七牛账号，可免费使用 10G 存储空间，<a href="https://portal.qiniu.com/signup?code=3lh1x6293fihe" target="_blank"><el-button type="text">立即注册七牛账号</el-button></a>
                </el-form-item>
                <el-button type="primary" :loading="loadQiNiu" @@click="submitQiNiu">保存</el-button>
            </el-form>
        </el-tab-pane>
        <el-tab-pane label="阿里云OSS" name="2">
            <el-form ref="form" :model="aliyun" label-width="90px">
                <el-form-item label="Bucket">
                    <el-input placeholder="请输入Bucket" v-model="aliyun.bucket">
                        <template slot="append">
                            <i class="el-icon-question"></i>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item label="Endpoint">
                    <el-input placeholder="请输入Endpoint,如：oss-cn-beijing.aliyuncs.com" v-model="aliyun.endpoint">
                        <template slot="append">
                            <i class="el-icon-question"></i>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item label="AccessKey">
                    <el-input placeholder="请输入AccessKey" v-model="aliyun.accessKey">
                        <template slot="append">
                            <i class="el-icon-question"></i>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item label="SecretKey">
                    <el-input placeholder="请输入SecretKey" v-model="aliyun.secretKey">
                        <template slot="append">
                            <i class="el-icon-question"></i>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item label="" style="text-align:left;">
                    设置为自己的阿里云账号，可免费使用 50G 存储空间，<a target="_blank" href="https://www.aliyun.com/product/oss"><el-button type="text">立即注册阿里云</el-button></a>
                </el-form-item>
                <el-button type="primary" :loading="loadAliYun" @@click="submitAliYun">保存</el-button>
            </el-form>
        </el-tab-pane>
    </el-tabs>
</el-col>
@section scripts{
    <script type="text/javascript">
        new Vue({
            el: "#app",
            data: {
                activeIndex: "7",
                defaultalbum: '默认相册',
                dropalbums: [],
                limit: 10,
                ismultiple: false,
                isshowfilelist: true,
                loadQiNiu: false,
                loadAliYun: false,
                activeName:'@defaultUploadType',
                qiniu: {
                    qiniuId:'@qiNiu.QiNiuId',
                    bucket: '@qiNiu.Bucket',
                    accessKey: '@qiNiu.AccessKey',
                    secretKey: '@qiNiu.SecretKey',
                    domain: '@qiNiu.DomainName'
                },
                aliyun: {
                    ossId:'@oss.OssId',
                    bucket: '@oss.Bucket',
                    endpoint: '@oss.Endpoint',
                    accessKey: '@oss.AccessKey',
                    secretKey: '@oss.SecretKey'
                }
            },
            methods: {
                handleSelect(key) {
                    var self = this;
                    skipPage(self, key);
                },
                submitQiNiu() {
                    var self = this;
                    self.loadQiNiu = true;
                    Axios.post(self, '/main/qiniu', {
                        data: {
                            qiniuId: self.qiniu.qiniuId,
                            bucket: self.qiniu.bucket,
                            accessKey: self.qiniu.accessKey,
                            secretKey: self.qiniu.secretKey,
                            domain: self.qiniu.domain
                        },
                        success(res) {
                            showMessage(self, res.msg, true);
                        },
                        error(res) {
                            showMessage(self, res.msg);
                        }
                    });
                    self.loadQiNiu = false;

                },
                submitAliYun() {
                    var self = this;
                    self.loadAliYun = true;
                    Axios.post(self, '/main/aliyun', {
                        data: {
                            ossId: self.aliyun.ossId,
                            bucket: self.aliyun.bucket,
                            endpoint: self.aliyun.endpoint,
                            accessKey: self.aliyun.accessKey,
                            secretKey: self.aliyun.secretKey
                        },
                        success(res) {
                            showMessage(self, res.msg, true);
                        },
                        error(res) {
                            showMessage(self, res.msg);
                        }
                    });
                    self.loadAliYun = false;
                }
            },
            created() {
                var self = this;
                PF.dropdownalbums(self);
            }
        });
    </script>
}
